<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css' rel='stylesheet'/>
    <link rel="stylesheet" href="dist/1.css">
    <title>表单账号输入不为空验证&密码二次验证</title>
</head>
<body>
    <main>
        <div class="box"> 
            <form action="https://www.baidu.com" onsubmit="return onSubmit()"> 
                <p>表单账号输入不为空验证&密码二次验证</p>
                <p>账号: <input type="text" name="name"  placeholder="请输入账号，必填"><span>*</span></p>
                <p>请设置密码：<input type="password" name="pwd1"  placeholder="请输入密码，必填"><span>*</span></p>
                <p>请再次输入密码：<input type="password" name="pwd2"  placeholder="请再次输入密码，二次确认，必填"><span>*</span></p>
                <div id="errors"></div>
                <button>提交</button>
            </form>
        </div>
    </main>
    <script>
        function onSubmit(){
            let pwd1 = document.querySelector('input[name="pwd1"]').value.trim()
            let pwd2 = document.querySelector('input[name="pwd2"]').value.trim()
            if(pwd1 == false || pwd2 == false){
                message('密码不能为空')
            }
            else if( pwd1 !== pwd2 ){
                message('前后密码不一致')
            }
            return false
        }
        function message(message){
            let a =document.querySelector('#errors')
            a.innerHTML = message
        }
    </script>
</body>
</html>